<template>
	<view class="content p-bot300" :style="{'--color':color}">
		<status-bar :title='title' :back="back"></status-bar>
		<block v-if="delivery_type == 0">
		<view class="viewbox auto bor_radius_10 unreceipt_addr choose_wxaddr m-top20"
		  v-if='!addDetail.Aaddress ' @click="toUrl(`/orderPage/Addresslist/Addresslist`)">
			<text class="unreceipt_addr_text">添加收货地址</text>
		</view>
		<orderAddress v-else :addDetail="addDetail"  @package1="packages = 1"  @package2="packages = 2"  @addr_pop_isshow="addr_pop_isshow=true"></orderAddress>
		</block>
		<block v-for="(item,index) in pageData" :key="item.id">
			<view class="viewbox auto m-top20 bgwhite padding20 d-flex bor_radius_10 ">
				 <view class="product_Img f-shrink-0 p-re">
					 <image :src="$imgUrls(item.pdtimg)" mode="aspectFill" class="bor_radius_10"></image>
					  <view class="h7 white numId p-top4 p-bot4 p-left14 p-right14">{{item.id}}</view>
				 </view>
				 <view class="d-flex f-column m-left30 j-sb">
					 <text class="color_33 size30 ellipsis">{{item.pdtname}}</text>
					 <view class="d-flex" v-if="item.pdt_spec">
						 <text class="color_99 h6 f-shrink-0">规格：</text>
						 <text class="color_33 h6 m-left10 ellipsis">{{item.pdt_spec}}</text>
					 </view>
					 <view class="d-flex">
						 <text class="color_99 h6">数量：</text>
						 <text class="color_33 h6 m-left10">X{{item.pdt_num}}</text>
					 </view>
				 </view>
			</view>
		
			<!--  选择包装 -->
			<view class="viewbox auto bgwhite bor_radius_10  p-top30 p-bot30 p-left20 d-flex j-sb a-center" 
			    v-if="item.packings">
				<text class="color_20 size30">选择包装</text>
				<view class="d-flex a-center m-right50">
					<block v-for="(itm,inx) in item.packings" :key="inx">
						<view class="d-flex a-center m-left40 m-right40" @click="packagesBtn(item.packages,itm,index)">
							<view class="Package d-flex a-center j-centert" :class="{packActive: item.packages == itm}"><view class="iconfont icon-xuanzhong h6"></view></view>
							<text class="h6 color_33 m-left16">{{itm}}</text>
						</view>
					</block>
				
				</view>
			</view>
	</block>
	<!-- 	<chickOrder :pageData="pageData"></chickOrder> -->
		
		
		<view class="viewbox auto bgwhite bor_radius_10 m-top20">
			<view class="list bot" v-if="allrefund_num > 0">
				<text class="color_33 size28">退桶数</text>
				<view class="refund">
					<view class="iconfont icon-jianshao2 size50  refundIcon"
					      :class="refund_num >0?'color_33':'color_cc'"
					     @click="subBarrel"></view>
					<text class="refund_num">{{refund_num}}</text>
					<view class="iconfont icon-zengjia1 size50 refundIcon" 
					      :class="refund_num < allrefund_num?'color_33':'color_cc'" 
						  @click="addBarrel"></view>
				</view>
			</view>
			<view class="list bot p-right20">
				<text class="color_33 size28">桶押金</text>
				<view class="money color_ff2">
					<text class="size26">￥</text>
					<text class="size36">{{deposit.deposit_money}}</text>
				</view>
			</view>
			<view class="list bot p-right20">
				<text class="color_33 size28">运费</text>
				<view class="money color_ff2">
					<text class="size26">￥</text>
					<text class="size36">{{deposit.delivery_fee}}</text>
				</view>
			</view>
			
			<view class="list  p-right20">
				<text class="color_33 size28">备注</text>
				<input type="text" v-model="Remark" class="flex-1 size26 text-right p-left10" placeholder="建议留言前先与商家沟通确认额~"/>
			</view>
			
		</view>
		
		
		<view class="viewbox auto bgwhite bor_radius_10 m-top20">
			<view class="list bot p-right20">
				<text class="color_ff2 size32 bold">总价</text>
				<view class="money color_ff2">
					<text class="size26">￥</text>
					<text class="size36">{{deposit.payment}}</text>
				</view>
			</view>
		</view>
	

		
		<!--  配送须知 -->
	<!-- 	<deliveryNotice :instructions=""></deliveryNotice> -->
		<view class="viewbox auto m-top20">
			<view class="color_33 h6 bold">配送须知：</view>
			<view class="rows f-column m-top20">
				    <rich-text :nodes="instructions"></rich-text>
			</view>
		</view>
		
		<view class="viewbox auto d-flex j-sa fixedBtn">
			 <view class="bot_btn d-flex cancel j-centert a-center size36 color_80" @click="$common.back(1)">没想好</view>
			 <view class="bot_btn d-flex bgcolor j-centert a-center size36 bold white" @click="Sure_Btn()">确定</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import chickOrder from '../warehouse/components/chickOrder.vue'
	import orderAddress from '../warehouse/components/orderAddress.vue'
	import deliveryNotice from '../warehouse/components/deliveryNotice.vue'
	
	export default {
		components:{
			chickOrder,
			orderAddress,
			deliveryNotice
		},
		data() {
			return {
				title:'快递到家',
				imgUrl:this.imgUrl,
				
				navHeight:getApp().globalData.navHeight,
			
				packages:1,  // 包装方式 1、生鲜鸡 2、礼品盒
				Remark:'',  // 备注
				
				addDetail:{},
				addList: [], // 收货地址列表
				addr_pop_isshow: false,
				ids:'',
				id:[],
				keycode:[],
				pageData:[],
				instructions:'',  // 配送须知
				refund_num:0,
				allrefund_num:0,
				deposit:'', // 押金信息
				Flag:true,
				delivery_type:0, // 0 线上 1 线下
			}
		},
		onLoad(e) {
			let that = this;
			if(e.ids) that.ids = e.ids;
			if(e.delivery_type){
				that.delivery_type = e.delivery_type;
				that.title = "支付";
			};
			console.log(that.ids)
		},
		onShow() {
			let that = this;
			if(that.delivery_type == 0){
				that.getAddress();
				that.getOldAddress();
			}
			that.getGiveGoodsInfo();
			
		},

		methods: {
			
			packagesBtn(type,typeson,index){
				let that = this;
				that.$set(that.pageData[index],'packages',typeson);
			},
			getGiveGoodsInfo(){
				let that = this;
				that.$http.post({
					url:'/singleSaleWarehouseApi/getGiveGoodsInfo',
					data:{
						ids:that.ids,
						
					}
				}).then(res=>{
					if(res.errcode != '100') return that.Toast(res.msg);
					const result = res.data;
					that.instructions = res.instructions;
					that.refund_num = res.refund_num;
					that.allrefund_num = res.refund_num;
					result.forEach((item,index)=>{
						if(item.packing){
							let packing = item.packing.split(',');
							that.$set(item,'packings',packing);
							that.$set(item,'packages',item.packings[0])
						}
						that.keycode.push(item.keycode)
						that.id.push(item.id)
					})
					that.getDepositPayFee();
					that.pageData = result;
				})
			},
			getDepositPayFee(){
				if(!this.Flag) return;
				this.Flag = false;
				this.$http.post({
					url:'/WaterApi/getDepositPayFee',
					data:{
						checkid:this.ids,
						refund_num:this.refund_num,
						delivery_type:this.delivery_type
					}
				}).then(res=>{
					this.Flag = true;
					if(res.code != 200) return this.$Toast(res.msg);
					const result = res.data;
					this.deposit = result;
				})
			},
			subBarrel(){
				if(this.refund_num > 0){
					this.refund_num--;
					this.getDepositPayFee();
					return;
				} 
			},
			addBarrel(){
				if(this.refund_num < this.allrefund_num){
					this.refund_num++;
					this.getDepositPayFee();
					return
				}  
			},
		  Sure_Btn(){
				if(!this.addDetail.Aaddress && this.delivery_type == 0) return this.$Toast('请添加收货地址！');
				this.$showLoading('');
				this.$http.post({
					url:'/WaterApi/getDepositPay',
					data:{
						checkid:this.ids,
						refund_num:this.refund_num,
						name:this.addDetail.Aname?this.addDetail.Aname:'',
						phone:this.addDetail.Amobile?this.addDetail.Amobile:'',
						address:this.addDetail.Aregion + this.addDetail.Aaddress,
						remarks:this.Remark,
						delivery_type:this.delivery_type
					}
				}).then(res=>{
					this.$hideLoading();
					if(res.code != '100') return this.$Toast(res.msg);
					const result = res.data;
					if(!result) {
						this.$Toast(res.msg);
						this.$back(2);
						return;
					};
					this.$pop.getPayment(result).then(pay=>{
						this.$back(2);
					});
					
				})
			},
			
			getOldAddress(){
				let that = this;
				that.$http.get({
					url:'/SRA_simMallApi/getOldAddress',
					data:{
						type: 3
					}
				}).then(res=>{
					if(res.code == '100' && res.data){
						that.addDetail = res.data
					}
				})
			},
			//  获取我的地址
			getAddress(){
				let that = this;
				that.$http.get({
					url:'/zzj_singleSaleApi/getAddress',
				}).then(res=>{
					if(res.code == '100' && res.data){
						that.addList = res.data
					}
				})
			},
			addAddress(editId){
				let that = this;
				let param = '';
				if(editId)
					param += '&editId=' + editId
				if(that.goods_id)
					param += '&goods_id=' + that.goods_id
				if(that.goods_num)
					param += '&goods_num=' + that.goods_num
				if(that.car_id)
					param += '&car_id=' + that.car_id
				if(that.group_id)
					param += '&group_id=' + that.group_id
				if(that.open_group)
					param += '&open_group=' + that.open_group
				if(that.specs)
					param = param + '&specs_bind_id=' + that.specs.specs_bind_id + '&specs_bind_text=' + that.specs.specs_bind_text
				console.log(param)
				uni.navigateTo({
					url: '/orderPage/order/addAddress?page_type=3'+ param
				})
			},
			chooseAdd(id) { // 选择收货地址
				let that = this;
				that.addr_pop_isshow = false;
				that.getCurrAdd(id);
			},
			getCurrAdd(id) { //获取选择的地址
				let that = this;
				that.$http.get({
				 	url: '/zzj_singleSaleApi/obtainAddress',
				 	data: {
				 		id: id
				 	}
				}).then(res => {
				 	if(res.code == 100 && res.data){
				 		that.Aregion = res.data.Aregion;
				 		that.addDetail = res.data;
				 	}
				}) 
			},
		},
		computed:{
			...mapState(['color','vid','bid']),
		}
	}
</script>

<style lang="scss">
	page{background: #f7f9fa;}
	.maskBg{
		width:100%;
		height: 100%;
		position: fixed;
		top:0;
		left:0;
		bottom: 0;
		background: #FFFFFF;
	}
	.emptyPage{
		background: #FFFFFF;
	}
	.fixedBtn {
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}
	
	.bot_btn{
		width:310rpx;
		height: 100rpx;
		border-radius: 50rpx;
		-webkit-border-radius: 50rpx;
	}
	.cancel{
		background: #f1f1f1;
	}
	
	.addr_pop_ftr{
		width: 100%;
		padding: 30upx 0;
		background: #ffffff;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	}
	.addr_list{
		overflow-x: hidden;
		background: #FFFFFF;
		-webkit-overflow-scrolling: touch;
		.addr_item{
			height: 157upx;
			border-bottom: 1px solid #dddddd;
			padding: 0 30upx;
			position: relative;
			.addr_info_c{
				overflow: hidden;
				text-overflow: ellipsis;
				color: #666666;
			}
			.addr_info_h{
				overflow: hidden;
				text-overflow: ellipsis;
				margin-bottom: 15upx;
				font-size: 36upx;
				font-family: arial;
			}
		}
	}
	.product_Img{
		width:140rpx;
		height: 140rpx;
	}
	.numId{
		position: absolute;
		right:0;top:0;
		background: var(--color);
		border-radius: 0 10rpx 0 10rpx;
	}
	.Package{
		width:30rpx;
		height: 30rpx;
		border:1rpx solid #CCCCCC;
		border-radius: 50%;
		-webkit-border-radius: 50%;
	}
	.packActive{
		border:1rpx solid var(--color) !important;
		background: var(--color) !important;
	}
	.list{
		width:100%;
		height: 92rpx;
		padding-left:20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.refund{
		height: 100%;
		display: flex;
		align-items: center;
	}
	.refundIcon{
		padding:14rpx;
	}
	
	.refund_num{
		width:62rpx;
		font-weight: bold;
		color:#000;
		font-size:28rpx;
		text-align: center;
	}
	.money{
		display: flex;
		align-items: center;
		
	}
</style>
